import React from 'react';
import ProForm, {
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';

import { useIntl } from 'umi';

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: API.JobListItem) => void;
  onSubmit: (values: API.JobListItem) => Promise<void>;
  updateModalVisible: boolean;
  isUpdate: boolean;
  values: Partial<API.JobListItem>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();
  return (
    <ModalForm<API.JobListItem>
      title={intl.formatMessage({
        id: 'pages.searchTable.updateForm.update',
        defaultMessage: '执行',
      })}
      visible={props.updateModalVisible}
      autoFocusFirstInput
      modalProps={{
        onCancel: () => {
          props.onCancel();
        },
      }}
      onFinish={async (values) => {
        // const tags = formRef?.current?.getFieldValue('tags');
        // console.log(`tags:`, tags);
        // values.tags = tags;
        // console.log(values);
        // console.log(values);
        return props.onSubmit(values);
      }}
    >
      <ProForm.Group>
        <ProFormText
          width="md"
          name="id"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.idLabel',
            defaultMessage: 'Id',
          })}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.idLabel',
            defaultMessage: 'Id',
          })}
          disabled={props.isUpdate}
          initialValue={props.values.id}
        />

        <ProFormText
          width="md"
          name="name"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.nameLabel',
            defaultMessage: 'Name',
          })}
          disabled={props.isUpdate}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.nameLabel',
            defaultMessage: 'Name',
          })}
          initialValue={props.values.name}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width="md"
          name="timezone"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.timezone',
            defaultMessage: 'timezone',
          })}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.timezone',
            defaultMessage: 'timezone',
          })}
          initialValue={props.values.timezone}
        />
        <ProFormText
          width="md"
          name="schedule"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.schedule',
            defaultMessage: 'schedule',
          })}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.schedule',
            defaultMessage: 'schedule',
          })}
          initialValue={props.values.schedule}
        />
      </ProForm.Group>

      <ProForm.Group>
        <ProFormText
          width="md"
          name="owner"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.owner',
            defaultMessage: 'owner',
          })}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.owner',
            defaultMessage: 'owner',
          })}
          initialValue={props.values.owner}
        />
        <ProFormText
          width="md"
          name="owner_email"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.email',
            defaultMessage: 'email',
          })}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.email',
            defaultMessage: 'email',
          })}
          initialValue={props.values.owner_email}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width="md"
          name="dependent_jobs"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.parentJob',
            defaultMessage: 'parentJob',
          })}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.parentJob',
            defaultMessage: 'parentJob',
          })}
          initialValue={props.values.dependent_jobs}
        />
        <ProFormSelect
          width="md"
          options={[
            {
              value: false,
              label: '否',
            },
            {
              value: true,
              label: '是',
            },
          ]}
          name="ephemeral"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.ephemeral',
            defaultMessage: 'ephemeral',
          })}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.ephemeral',
            defaultMessage: 'ephemeral',
          })}
          initialValue={props.values.ephemeral || false}
        />
      </ProForm.Group>

      <ProForm.Group>
        <ProFormText
          width="sm"
          name="expireAt"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.expireAt',
            defaultMessage: 'expireAt',
          })}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.expireAt',
            defaultMessage: 'expireAt',
          })}
          initialValue={props.values.expires_at}
        />
        <ProFormSelect
          width="sm"
          name="concurrency"
          options={[
            {
              value: 'allow',
              label: '是',
            },
            {
              value: 'forbid',
              label: '否',
            },
          ]}
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.concurrency',
            defaultMessage: 'concurrency',
          })}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.concurrency',
            defaultMessage: 'concurrency',
          })}
          initialValue={props.values.concurrency}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect<{
          value: boolean;
          label: string;
        }>
          width="sm"
          name="disabled"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.disabled',
            defaultMessage: 'disabled',
          })}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.disabled',
            defaultMessage: 'disabled',
          })}
          options={[
            {
              value: true,
              label: '否',
            },
            {
              value: false,
              label: '是',
            },
          ]}
          initialValue={props.values.disabled || false}
        />
        <ProFormText
          width="sm"
          name="retries"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.retries',
            defaultMessage: 'retries',
          })}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.retries',
            defaultMessage: 'retries',
          })}
          initialValue={props.values.retries || 0}
        />
        <ProFormText
          width="sm"
          name="executor"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.executor',
            defaultMessage: 'executor',
          })}
          placeholder={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.executor',
            defaultMessage: 'executor',
          })}
          initialValue={props.values.executor}
        />
      </ProForm.Group>

      <ProForm.Group>
        {/* <ProDescriptions
          // bordered
          formProps={{
            onValuesChange: (e, f) => {
              formRef?.current?.setFieldsValue({
                processors: f.processors,
              });
            },
          }}
          editable={{}}
        >         <ProDescriptions.Item
        label={intl.formatMessage({
          id: 'pages.searchTable.updateForm.job.processor',
          defaultMessage: 'processors',
        })}
        dataIndex="processors"
        valueType="code"
      ></ProDescriptions.Item>
        </ProDescriptions> */}
      </ProForm.Group>
      <ProForm.Group>
        <ProFormTextArea
          width="sm"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.tags',
            defaultMessage: 'tags',
          })}
          name="tags_str"
          initialValue={props.values.tags_str}
        />
        <ProFormTextArea
          width="sm"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.processors',
            defaultMessage: 'processors',
          })}
          name="processors_str"
          initialValue={props.values.processors_str}
        />
        <ProFormTextArea
          width="sm"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.metadata',
            defaultMessage: 'metadata',
          })}
          name="metadata_str"
          initialValue={props.values.metadata_str}
        />
        <ProFormTextArea
          width="sm"
          label={intl.formatMessage({
            id: 'pages.searchTable.updateForm.job.executorConfig',
            defaultMessage: 'executorConfig',
          })}
          name="executor_config_str"
          initialValue={props.values.executor_config_str}
        />
      </ProForm.Group>
    </ModalForm>
  );
};

export default UpdateForm;
